<template>
  <div class="add-wrap" v-loading="loading">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <div class="project">
      <el-form
        :model="basicForm"
        label-position="top"
        :rules="basicRules"
        ref="basicFormRef"
      >
        <div class="body">
          <div class="body-left">
            <el-form-item label="文件名称" prop="title">
              <el-input
                v-model="basicForm.title"
                placeholder="请输入"
                :disabled="isDetail"
              ></el-input>
            </el-form-item>

            <el-form-item label="索引号">
              <el-input
                v-model="basicForm.indexNumber"
                placeholder="请输入"
                :disabled="isDetail"
              ></el-input>
            </el-form-item>

            <el-form-item label="生效时间">
              <el-date-picker
                v-model="basicForm.effectTime"
                type="date"
                :disabled="isDetail"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="发布机构">
              <el-input
                v-model="basicForm.publishUnit"
                placeholder="请输入"
                :disabled="isDetail"
              ></el-input>
            </el-form-item>

            <el-form-item label="成文日期">
              <el-date-picker
                v-model="basicForm.wordTime"
                type="date"
                :disabled="isDetail"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="发布日期">
              <el-date-picker
                v-model="basicForm.publishTime"
                type="date"
                :disabled="isDetail"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="文号">
              <el-input
                v-model="basicForm.number"
                placeholder="请输入"
                :disabled="isDetail"
              ></el-input>
            </el-form-item>

            <el-form-item label="公文种类">
              <el-input
                v-model="basicForm.fileType"
                placeholder="请输入"
                :disabled="isDetail"
              ></el-input>
            </el-form-item>

            <el-form-item label="有效性">
              <el-input
                v-model="basicForm.validity"
                placeholder="请输入"
                :disabled="isDetail"
              ></el-input>
            </el-form-item>

            <el-form-item label="责任单位">
              <el-input
                v-model="basicForm.dutyUnit"
                placeholder="请输入"
                :disabled="isDetail"
              ></el-input>
            </el-form-item>
          </div>

          <div class="body-right">
            <el-form-item label="文件内容">
              <vue-editor
                v-model="basicForm.content"
                class="editor"
                :disabled="isDetail"
              />
            </el-form-item>

            <el-form-item label="附件上传">
              <el-upload
                class="upload-image"
                action=""
                :auto-upload="false"
                :on-change="handleChange"
                :on-remove="handleRemove"
                :show-file-list="false"
                :file-list="fileList"
                v-if="!isDetail"
                accept=".pdf,.doc,.docx,.ppt,.pptx"
              >
                <el-button size="small" type="primary"
                  >点击上传</el-button
                >
              </el-upload>
              <span>{{ fileName }}</span>
              <i
                v-if="fileName && !isDetail"
                class="el-icon-delete delete"
                @click="deleteFile"
                >删除</i
              >
              <i
                v-if="fileName && isDetail"
                class="el-icon-view view"
                @click="viewFile"
                >预览</i
              >
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="line" v-show="!isDetail">
      <el-button @click="saveInfo" class="save-btn"
        >保存</el-button
      >
    </div>

    <FileViewDialog
      :previewUrl="previewUrl"
      :visible.sync="showDialog"
    />
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb'
import dayjs from 'dayjs'
import {
  addFileInfo,
  uploadFileById
} from '@/api/dataManagement'
import { VueEditor } from 'vue2-editor'
import FileViewDialog from './components/fileViewDialog.vue'
import { STATIC_FILE_URL } from '@/api/config.js'

export default {
  props: {
    pkid: String,
    title: String,
    data: Object,
    isEdit: {
      type: Boolean,
      default: false
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Breadcrumb,
    VueEditor,
    FileViewDialog
  },
  data() {
    return {
      basicForm: {
        pkid: '',
        title: ''
      },
      checkList: [],
      loading: false,
      basicRules: {
        title: [
          {
            required: true,
            message: '请输入文件名称',
            trigger: 'blur'
          }
        ]
      },
      dialogImageVisible: false,
      dialogImageUrl: '',
      fileList: [],
      props: {},
      roleList: [],
      previewImage: '',
      previewVisible: false,
      previewImageList: [],
      content: '<p>请输入</p>',
      fileName: '',
      uploadFile: null,
      showDialog: false,
      previewUrl: ''
    }
  },
  computed: {
    titles() {
      return [this.$route.query.title]
    },
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  watch: {},
  mounted() {
    if (this.pkid) {
      this.basicForm = this.data
      const path = this.data.filePath
      if (path) {
        this.fileName = path.substring(
          path.lastIndexOf('/') + 1
        )
      }
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    // 保存信息
    async saveInfo() {
      try {
        const valid =
          await this.$refs.basicFormRef.validate()
        if (valid) {
          this.loading = true
          try {
            if (this.basicForm.effectTime) {
              this.basicForm.effectTime = dayjs(
                this.basicForm.effectTime
              ).format('YYYY-MM-DD')
            } else {
              this.basicForm.effectTime = ''
            }

            if (this.basicForm.publishTime) {
              this.basicForm.publishTime = dayjs(
                this.basicForm.publishTime
              ).format('YYYY-MM-DD')
            } else {
              this.basicForm.publishTime = ''
            }

            if (this.basicForm.wordTime) {
              this.basicForm.wordTime = dayjs(
                this.basicForm.wordTime
              ).format('YYYY-MM-DD')
            } else {
              this.basicForm.wordTime = ''
            }

            let fileId = ''
            if (this.uploadFile) {
              const image = new FormData()
              image.append('file', this.uploadFile)
              fileId = await uploadFileById(image)
              this.basicForm.fileId = fileId.data
            }

            await addFileInfo(this.basicForm).then(
              (res) => {
                if (res.success) {
                  this.$message.success(
                    this.pkid ? '编辑成功' : '新增成功'
                  )
                  this.$router.push({
                    path: '/dataManagement/fileManagement/list',
                    query: { refresh: Date.now() }
                  })
                } else {
                  this.$message.error(res.message)
                }
                this.loading = false
              }
            )
          } catch (error) {
            this.$message.error(error)
          }
        }
      } catch (error) {
        // this.$message.error(error);
      }
    },

    handleRemove(file) {
      // this.uploadFile = ''
      // if (this.pkid) {
      //   this.basicForm.fileId = ''
      // }
    },

    handleChange(file) {
      this.fileName = file.name
      this.uploadFile = file.raw
    },

    handlePreviewImage(file) {
      if (file.url) {
        this.previewImage = file.url
      } else if (file.raw) {
        this.previewImage = URL.createObjectURL(file.raw)
      }
      this.previewVisible = true
    },

    deleteFile() {
      this.fileName = ''
      this.uploadFile = ''
      if (this.pkid) {
        this.basicForm.fileId = ''
      }
    },

    viewFile() {
      this.previewUrl = `${STATIC_FILE_URL}${this.basicForm.filePath}`
      this.showDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
.add-wrap {
  height: 100%;
  overflow-y: auto;

  .body {
    display: flex;
    padding: 10px 0 0 20px;

    &-left {
      width: 25%;
      border-right: 1px solid #f1f1f1;
      overflow: scroll;
    }

    &-right {
      flex: 1;
      padding: 0 20px;

      .editor {
        height: 680px;
        overflow: auto;
      }
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-right: 10px;
    }
  }

  .line {
    position: sticky;
    bottom: 0;
    width: calc(100% - 40px);
    padding-left: 30%;
    margin: 0 auto;
    right: 15px;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    z-index: 10;
  }
}

::v-deep .el-checkbox-group {
  width: 450px;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-item {
  width: 25%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

::v-deep .el-textarea {
  width: 100% !important;
  .el-textarea__inner {
    width: 100% !important;
  }
}
::v-deep .avatar-uploader {
  display: flex;
  .el-upload-list {
    display: flex;
    li {
      width: 140px;
      height: 140px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 10px;
      img {
        width: 100px;
        height: 100px;
      }
      .el-upload-list__item-name {
        position: absolute;
        bottom: 10px;
        display: none;
      }
    }
  }
}
::v-deep .uploadBox {
  width: 140px;
  height: 140px;
  background: #eeeeee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  div {
    font-size: 14px;
  }
}

::v-deep .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

::v-deep
  .el-upload-list--picture-card
  .el-upload-list__item {
  width: 100px;
  height: 100px;
}

::v-deep .el-upload-list__item-status-label {
  display: none !important;
}

.image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.delete {
  color: red;
  margin: 0 10px;
  cursor: pointer;
}

.view {
  color: rgb(51, 149, 240);
  margin: 0 10px;
  cursor: pointer;
}
</style>
